@import "mixin";

body {
  padding-top: rem(35px);
}

.tabs {
  position: fixed;
  top: 0px;
  width: 100%;
  height: rem(35px);
  background-color: #fff;
  z-index: 10;
  >.list-wrapper {
    display: flex;
    width: 100%;
    height: 100%;
    @include border-bottom-1px(#e5e5e5);
    >.list-item {
      flex: 1;
      width: 100%;
      height: 100%;
      line-height: rem(35px);
      text-align: center;
      font-size: rem(13px);
      color: #999999;
      &.active {
        position: relative;
        color: #dc3838;
        &:before {
          content: '';
          position: absolute;
          bottom: 0;
          left: 50%;
          margin-left: rem(-20px);
          width: rem(40px);
          height: rem(1px);
          background-color: #dc3838;
        }
      }
    }
  }
}
.content {
  width: 100%;
  >.content-item {
    >.video-wrapper {
      width: 100%;
    }
    >.centent-body {
      padding-top: rem(20px);
      background: #ffffff;
      >h3 {
        margin: 0 rem(16px) rem(20px) rem(16px);
        padding-left: rem(9px);
        border-left: rem(4px) solid #dc3838;
        height: rem(16px);
        line-height: rem(16px);
        font-size: rem(16px);
        color: #333333;
        >span {
          padding-left: rem(12px);
          font-size: rem(12px);
          color: #999999;
        }
      }
      >.content-video-wrapper {
        padding: 0 rem(16px) rem(50px);
        background-color: #f4f5fa;
        >h5 {
          padding: rem(16px) 0;
          font-size: rem(15px);
          color: #333333;
        }
        >.list-wrapper {
          >.list-item {
            padding: rem(6px) 0;
            >a {
              display: flex;
              >.item-left {
                display: inline-block;
                flex: 0 0 rem(117px);
                width: rem(117px);
                height: rem(73px);
                border-radius: rem(3px);
                overflow: hidden;
                >img {
                  width: 100%;
                  height: 100%;
                }
              }
              >.item-right {
                padding-left: rem(12px);
                >.title {
                  margin-bottom: rem(8px);
                  font-weight: bold;
                  font-size: rem(16px);
                  color: #333333;
                }
                >.author {
                  margin-bottom: rem(8px);
                  font-size: rem(13px);
                  color: #999999;
                }
                >.desc {
                  font-size: rem(13px);
                  color: #999999;
                }
              }
            }
          }
        }
      }
      >.content-text-wrapper {
        position: relative;
        max-height: rem(100px);
        overflow: hidden;
        padding: 0 rem(16px);
        >.content {
          >p {
            margin-bottom: rem(20px);
            text-indent: rem(26px);
            line-height: rem(20px);
            font-size: rem(13px);
            color: #666666;
            >img {
              float: left;
              width: 100%;
              text-align: center;
            }
          }
          p {
            margin-bottom: rem(20px);
            text-indent: rem(26px);
            line-height: rem(20px);
            font-size: rem(13px);
            color: #666666;
            img {
              float: left;
              width: 100%;
            }
          }
          div {
            img {
              float: left;
              width: 100%;
            }
          }
          img {
            float: left;
            width: 100%;
          }
          span {
            font-size: rem(13px);
            color: #666666;
            img {
              float: left;
              width: 100%;
            }
          }
        }
        >.unfold-field {
          display:none;
          position:absolute;
          font-size: 0;
          bottom:0;
          left: 0;
          width:100%;
          height: rem(100px);
          z-index: 3;
          >.unflod-field_mask {
            height: rem(60px);
            width: 100%;
            background-image: -webkit-gradient(linear,left top,left bottom,color-stop(0,hsla(0,0%,100%,0)),to(#fff));
            background-image: linear-gradient(-180deg,hsla(0,0%,100%,0),#fff);
          }
          >.unfold-field_text {
            cursor: pointer;
            width:100%;
            color: #406599;;
            height: rem(40px);
            font-size: 0px;
            line-height: rem(40px);
            text-align: center;
            background:#fff;
            >span {
              display:inline-block;
              height: rem(40px);
              line-height: rem(40px);
              font-size: rem(16px);
              color: #dc3838;
              &:after {
                content:"";
                vertical-align: middle;
                @include bg-image('../images/arrow-bottom');
                background-size: contain;
                background-repeat: no-repeat;
                width: 9px;
                height: 6px;
                display: inline-block;
                margin-left: 5px;
              }
            }
          }
        }
      }
    }
  }
}